<!--

    Copyright 2016-2017, Huawei Technologies Co., Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lifecycle Manager</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/VMMain.css" rel="stylesheet"/>
    <link href="css/bootstrap-table.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/rest.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="js/gsolcm.js"></script>
    <script type="text/javascript" src="../common/thirdparty/bootbox/bootbox.min.js"></script>
    <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
    <script type="text/javascript" src="js/jquery.bootstrap-growl.min.js"></script>
    <script type="text/javascript" src="js/jquery.isloading.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript" src="js/dialog-min.js"></script>
    <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            new lcmHandler();

            $('.modal-dialog').draggable();
           // $("#detailCont").show();
            var jsondata = loadGetServiceData();
            
            $.each(jsondata,function(k,v){
             jsondata[k].createTime=  new Date(jsondata[k].createTime).toUTCString();
            });
            
            $('#sai').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });
 $('.table tbody tr').click(function() {
                $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
            })
            
            $('.detail-top ul li').click(function() {
                $(this).addClass('current').siblings().removeClass('current');
            });
            $("#topoCont").hide();
            $("#inpCont").show();
            $("#topoContMod").hide();
            $("#detailContMod").hide();
            $("#inpContMod").show();
            
            $('#sai').bootstrapTable({}) .on('click-row.bs.table', function (e, row, $element) {
                var newURL = "accorTables.html?serviceId="+row.serviceId + "&serviceType="+row.serviceType;
              //  var newURL = "accorTables.html?serviceId="+row.serviceId ;
                console.log("URL: "+newURL);
                document.getElementById("tabContainer").style.display = "none";
                document.getElementById("detailConObj").setAttribute('data', newURL);
                document.getElementById("detailContDlg").setAttribute('data', newURL);
                document.getElementById("tabContainer").style.display = "block";

                //loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);
                document.getElementById("topoContObj").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);
                document.getElementById("topoContDlg").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);
                document.getElementById('inputcontent').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
                document.getElementById('inputcontentDlg').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
               });
            
        });

        function operateFormatter(value, row, index) {
            return [
                '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
            ].join('');
        }
        
        function operateFormatterServiceName(value, row, index){
            var temp = row.serviceId;
            return [
                    '<a data-toggle="modal" href="#ModifyModal" style="text-decoration:underline" onclick="return anchorClick(' + temp + ')">' + value + '</a>'
                ].join('');
        }
        window.operateEvents = {
            'click .siteDeleteImg': function (e, value, row, index) {
                // TO DO ajex call for delete
                var result = deleteService(row.id, row);
            }
        };

        function hideBasic() {
            $("#basicInfoTab").hide();
            initParameterTab();
            $("#templateParameterTab").show();
        }

        function showBasic() {
            $("#basicInfoTab").show();
            $("#templateParameterTab").hide();
        }

        function serviceTemplateChanged() {
            templateParameters.changed = true;
        }

        function showTopoCont() {
            $("#topoCont").show();
            $("#detailCont").hide();
            $("#inpCont").hide();
        }

        function showDetCont() {
            $("#topoCont").hide();
            $("#detailCont").show();
            $("#inpCont").hide();
        }

        function showInpCont() {
            $("#topoCont").hide();
            $("#detailCont").hide();
            $("#inpCont").show();
        }

        function showTopoContMod() {
            $("#topoContMod").show();
            $("#detailContMod").hide();
            $("#inpContMod").hide();
        }

        function showDetContMod() {
            $("#topoContMod").hide();
            $("#detailContMod").show();
            $("#inpContMod").hide();
        }

        function showInpContMod() {
            $("#topoContMod").hide();
            $("#detailContMod").hide();
            $("#inpContMod").show();
        }

        function loadIframe(iframeName, url) {
            var $iframe = $('#' + iframeName);
            if ( $iframe.length ) {
                $iframe.attr('src',url);
                $iframe.style.height = "400px";
                return false;
            }
            return true;
        }
    </script>
    <style>
        .nav-tabs {
            border-bottom-style: none;
        }
        .mT15 {
            margin-top: 15px;
        }
        .fixed-table-container tbody td .th-inner,
        .fixed-table-container thead th .th-inner {
            line-height: 4px;
        }
        .fixed-table-pagination .pagination-info {
            display: none !important;
        }
        .table tbody tr:hover td,
        .table tbody tr.odd:hover td {
            background-color: #e6fbe0 !important;
        }
        /*.fixed-table-pagination .page-list{display:inline-block  !important}*/
        /*.detail-top ul{
        background:#F8F6F6 !important;
        }*/
        
        .detail {
            border-top-style: none;
        }
        .btn {
            padding: 4px;
        }
        #ModifyModal .modal-dialog {
            width: 1100px;
        }
        #vmAppDialog .modal-dialog {
            width: 630px;
        }
        #ModifyModal .modal-dialog body {
            margin: 10px;
        }
        .dropdown-menu {
            min-width: 10px;
        }
        .nav-tabs.nav-justified>.active>a,
        .nav-tabs.nav-justified>.active>a:hover,
        .nav-tabs.nav-justified>.active>a:focus {
            border-left: 1px solid #4AC9FF;
            border-right: 1px solid #4AC9FF;
            border-top: 1px solid #4AC9FF;
            border-right: 1px solid #4AC9FF
        }
        .nav-tabs.nav-justified>li>a {
            border-bottom: 1px solid #4AC9FF;
            border-radius: 4px 4px 0 0
        }
        .clearfix {
            display: none;
        }
        .isloading-wrapper.isloading-right{
            margin-left:10px;
        }
        .isloading-overlay{
            position:relative;
            text-align:center;
        }
        .isloading-overlay .isloading-wrapper{
            background: url("images/loading.gif") 90% 50% no-repeat #FFFFFF;
            padding:15px 30px;
            -webkit-border-radius:7px;
            -webkit-background-clip:padding-box;
            -moz-border-radius:7px;
            -moz-background-clip:padding;
            border-radius:7px;
            background-clip:padding-box;
            display:inline-block;
            margin:0 auto;
            top:10%;
            z-index:9000;
        }
        .icon-refresh{
            background: url("images/loading.gif") 50% 50% no-repeat;
        }
        </style>
</head>
<body id="open_base_site_cotentBody" class="cotentBody ng-scope">
<div class="container-fluid ms-controller">
    <h3> Life Cycle Manager </h3>
 <div class="separator-line"></div>
    <div class="uploadBtn">
        <div id="open_base_tpL_userHeader" class="userHeader">
            <div id="open_base_tpL_buttonGroup" class="openoButton_buttonGroupClass">
                <div class="openo openo-widget-button openoButton_buttonClass_parent ng-isolate-scope openoButton_buttonClass defaultbutton openoButton_button_default"
                     tabindex="0" id="false" text="res.brApp_ui_res_btn_create" icon-url="./images/add.png"
                     cls="defaultbutton" click="clickAdd"
                     style="display: inline-block; padding-left: 0px; padding-right: 0px;">
                    <div class="openoButton_buttonInnerClass openo-corner-all openoButton_Image" id="false_button">
                        <span class="openo-widget-button-image openoButton_buttonLeftImg"
                              style="background-image: url(images/add.png);"></span>
                        <span class="openoButton_buttonCenterText openoButton_buttonCenterTextFont">Create</span>
                        <span class="openo-widget-button-image openoButton_buttonImgDefault"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row-fluid" data-name="table_zone">
        <div id='ict_virtualApplication_table_div'>
            <div>
                <div class="top">
                    <table class="table table-striped" id="sai" data-pagination="true" data-page-size="5"
                           data-pagination-first-text="First" data-pagination-pre-text="Previous"
                           data-pagination-next-text="Next" data-pagination-last-text="Last" data-filter-control="true">
                        <thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
                        <tr class="active" style="background:#D9D6D5">

                            <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"
                                data-formatter="operateFormatterServiceName" data-field="serviceName"
                                data-sortable="true" data-filter-control="input">
                                <div class="openo-table-th-border"></div>
                                <div class="DataTables_sort_wrapper openo-ellipsis ">
                                                <span id="overlayDesc_sorticon"
                                                      class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Service  Name
                            </span>
                                </div>
                            </th>

                            <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"
                                data-field="templateName" data-sortable="true" data-filter-control="input">
                                <div class="openo-table-th-border"></div>
                                <div class="DataTables_sort_wrapper openo-ellipsis ">
                                                <span id="overlayThincCPE_sorticon"
                                                      class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Template Name
                    </span>
                                </div>
                            </th>

                            <!--  th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayDCName" data-sortable="true">
                                <div class="openo-table-th-border"></div>
                                <div class="DataTables_sort_wrapper openo-ellipsis ">
                                    <span id="overlayDCName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Service  Instruction                    </span>
                                </div>
                            </th -->
                            <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"
                                data-field="createTime" data-sortable="true" data-filter-control="input">
                                <div class="openo-table-th-border"></div>
                                <div class="DataTables_sort_wrapper openo-ellipsis ">
                                                <span id="overlayVPC_sorticon"
                                                      class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Create Time
                          </span>
                                </div>
                            </th>
                            <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"
                                data-field="creator" data-sortable="true" data-filter-control="input">
                                <div class="openo-table-th-border"></div>
                                <div class="DataTables_sort_wrapper openo-ellipsis ">
                                                <span id="overlayVPCCIDR_sorticon"
                                                      class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Creator
                          </span>
                                </div>
                            </th>
                            <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"
                                data-field="overlayOperation" align="center" data-formatter="operateFormatter"
                                data-events="operateEvents">
                                <div class="openo-table-th-border"></div>
                                <div class="DataTables_sort_wrapper openo-ellipsis ">
                                    <span id="portAction_sorticon"
                                          class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Action</span>
                                </div>
                            </th>
                        </tr>
                        </thead>

                        <tbody>


                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="ModifyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="content" style="background:#fafafa;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="">
                            <span>Service Info</span>
                        </h4>
                    </div>

                    <div class="detail" style="margin:10px;border-radius:5px;">
                        <div class="detail-top" style="margin-top:10px;border-radius:5px;">
                         <span><h2 style="margin-left: 1%">Detailed Info</h2></span>
                        

                        
                        
                        <!--    <ul class="nav nav-tabs nav-justified vmapp-margin">
                                <li class="active basic">
                                    <a href="#" onClick="showDetContMod();" id="" data-toggle="tab">
                                        <span>Detail Info</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a href="#" onclick="showTopoContMod();" data-toggle="tab">
                                        <span>Topo</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a href="#" onclick="showInpContMod();" data-toggle="tab">
                                        <span>Input Data</span>
                                    </a>
                                </li>
                            </ul> -->

                            <div id="detailContMod">
                                <object id="detailContDlg" data="accorTables.html" width="100%" height="300" type="text/html">

                                </object>
                            </div>
                            <div id="topoContMod" style="display:none;">
                                <object id="topoContDlg" data="TopoAccor.html" width="100%" height="300" type="text/html">

                                </object>
                                <!--<iframe id="topoFrame" src="chartTopo.html" name="" style="width:100%; height:400px;" allowTransparency="true" scrolling="no" frameborder="0">
                                </iframe>-->
                            </div>
                            <div id="inpContMod" style="display:none;">
                                <object id="inputcontentDlg" data="InputData.html" width="100%" height="300"
                                        type="text/html">

                                </object>
                                <!--<iframe src="InputData.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
                                </iframe>
                                </iframe>-->
                            </div>

                        </div>
                        <div class="detail-bottom"></div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"
                                aria-hidden="true" id="">
                            <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
                        </button>
                        <button data-dismiss="modal" style="width:80px;" type="button"
                                class="btn button-previous SDBtn">
                            <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
                        </button>

                    </div>
                    </br>

                </div>
            </div>
        </div>
    </div>

    <div style="padding-top:20px;"></div>

    <div id="tabContainer" class="detail" style="border-radius:5px;display: none">
        <div class="detail-top" style="margin-top:2px;border-radius:5px;">

            <span><h2 style="margin-left: 1%">Detailed Info</h2></span>

            <div id="inpCont" style="display:none;">
                <object id="inputcontent" src="InputData.html" width="100%" height="300" type="text/html">
                </object>
            </div>
         <!--   <ul class="nav nav-tabs nav-justified vmapp-margin">

                <li class="active basic">
                    <a href="#" onClick="showDetCont();" id="detHov" data-toggle="tab">
                        <span>Detail Info</span>
                    </a>
                </li>

                <li class="">
                    <a href="#" onclick="showTopoCont();" data-toggle="tab">
                        <span>Topo</span>
                    </a>
                </li>

                <li class="">
                    <a href="#" onclick="showInpCont();" data-toggle="tab">
                        <span>Input Data</span>
                    </a>
                </li>

            </ul> -->
        </div>

        <div style="border-radius:5px;">
            <div id="detailCont" style="display:none;">

                <object id="detailConObj" data="accorTables.html" width="100%" height="300" type="text/html">

                </object>
            </div>
            <div id="topoCont" style="display:none;">
                <!--<iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
                </iframe>-->
                <!--<object data="chartTopo.html" width="100%" height="300" type="text/html">

                </object>-->
                <object id="topoContObj" data="TopoAccor.html" width="100%" height="300" type="text/html">

                </object>
            </div>
            <div id="inpCont" style="display:none;">
                <object id="inputcontent" src="InputData.html" width="100%" height="300" type="text/html">
                </object>
            </div>
        </div>

    </div>

</div>
</br>

<div id="vmAppDialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="content">
                <div class="modal-header" style="margin-bottom: 15px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        <span>Create</span>
                    </h4>
                </div>
                <form class="form-horizontal" role="form" id="neForm">
                    <div id="wizard">
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-justified vmapp-margin">
                                <li class="active basic">
                                    <a href="#basicTab" style="margin-left:1px;" onclick="showBasic();" id="basicTab"
                                       data-toggle="tab">
                                        <span>Base</span>
                                    </a>
                                </li>
                                <li style="padding-right:2px;" class="para">
                                    <a href="#" onclick="hideBasic();" data-toggle="tab">
                                        <span>Template Parameters</span>
                                    </a>
                                </li>

                            </ul>

                            <div id="basicInfoTab">
                                <div class="mT15 form-group" style="margin-left:25px;"
                                     ms-class="has-error:vmAppDialog.name==''">
                                    <label class="col-sm-3 control-label">
                                        <span>Service Name</span>
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-sm-7">
                                        <input type="text" id="svcName" name="svcName" class="form-control"
                                               placeholder="Service Name" maxlength="256"/>
                                    </div>
                                </div>
                                <div class="mT15 form-group" style="margin-left:25px;"
                                     ms-class="has-error:vmAppDialog.name==''">
                                    <label class="col-sm-3 control-label">
                                        <span>Service Description</span>
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-sm-7">
                                        <input type="text" id="svcDesc" name="" class="form-control"
                                               placeholder="Service Description" maxlength="256"/>
                                    </div>
                                </div>

                                <div class="form-group" style="margin-left:25px;margin-bottom:15px;"
                                     ms-class="has-error:vmAppDialog.name==''">
                                    <label class="col-sm-3 control-label">
                                        <span>Service Template</span>
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-sm-7">
                                        <select class="form-control" style="padding-top: 0px;padding-bottom: 0px;"
                                                id="svcTempl" name="svcTempl" onchange="serviceTemplateChanged();">
                                            <option value="select">--select--</option>
                                            <option value="1.1">1.1</option>
                                            <option value="1.2">1.2</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div id="templateParameterTab">

                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"
                                    aria-hidden="true" id="createNS">
                                <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
                            </button>
                            <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">
                                <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
                            </button>

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
<div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide"
     style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;">
    <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_0">
        <label class="openo-ellipsis openo-select-blank-item"
               style="width: 100%; display: block; height: 20px;"></label>
    </div>
    <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_1">
        <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">ETH</label>
    </div>
    <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_2">
        <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;" title="POS">POS</label>
    </div>
    <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_3">
        <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Trunk</label>
    </div>
    <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_4">
        <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Loopback</label>
    </div>
</div>
<div class="modal fade" id="progressDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="margin-left:10px;margin-bottom:5px;">
                <h4 class="modal-title" id="idProgressTitle" style="text-align:center;"></h4>
            </div>
            <div class="modal-body" style="margin-left:10px;margin-bottom:5px;margin-right:10px;">
                <div class="progress">
                    <div id="progressbar" class="progress-bar" role="progressbar" style="width: 10%;">
                        <span id ="progressValue">0%</span>       
                    </div>
                </div>
               <div id="progressContent"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="errorDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="errorDialogTitle"  style="text-align:center;"></h4>
            </div>
            <div class="modal-body" id = "errorDialogReason" style="margin-left:20px;margin-bottom:5px;margin-right:10px;"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
